<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
    <title></title>
	<style>
		
		.wall {
			height: 100vh;
			padding: 20px;
		}
		.videoItem {
			height: 25%;
			margin-bottom: 20px;
		}
	</style>
  </head>
  <body>
    <div class="wall">
      <video class="video-js videoItem" id="videoPlayer1"></video>
      <video class="video-js videoItem" id="videoPlayer2"></video>
      <video class="video-js videoItem" id="videoPlayer3"></video>
      <video class="video-js videoItem" id="videoPlayer4"></video>
    </div>
  </body>

  <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
  <script>
    let urls = [
      "https://open.ys7.com/v3/openlive/F46526610_3_2.m3u8?expire=1713770301&id=572079164098609152&t=abd4b4f27ff6cb95d9b1a6f8bf4bdecea7e8fdc0c16cf1e5eca577e1a8ec2a36&ev=100",
      "https://open.ys7.com/v3/openlive/F46526610_4_2.m3u8?expire=1713770333&id=572079296591630336&t=fd5302d88bc773cb50adf5f07ea6e8598652d2eb66e38d155eafe3b1c35f236a&ev=100",
      "https://open.ys7.com/v3/openlive/F46526610_1_2.m3u8?expire=1712225302&id=565598969137209344&t=6513b4d1c9f6ca7dd2d210f46cb18f91570aae5d2a744018e09539abadd48704&ev=100",
      "https://open.ys7.com/v3/openlive/F46526610_2_2.m3u8?expire=1712225320&id=565599045406425088&t=7d0229636540eb95b5140462a2cfdedb6692b5e6802162cadc37fb3b5b68ece7&ev=100",
    ];

    let options = {
      autoplay: true,
      controls: true,
      fluid: true,
      muted: true,
      aspectRatio: "38:9",
      language: "zh-CN",
      techOrder: ["html5"],
      sourceOrder: true,
      flash: { hls: { withCredentials: false } },
      html5: { hls: { withCredentials: false } },
      sources: [
        {
          withCredentials: false,
          type: "application/x-mpegURL",
          src: "",
        },
      ],
    };

    urls.forEach((item, index) => {
      let dom = document.getElementById(`videoPlayer${index + 1}`);
      let player = videojs(
        dom,
        {
          ...options,
          sources: [
            {
              withCredentials: false,
              type: "application/x-mpegURL",
              src: item,
            },
          ],
        },
        function onPlayerReady(e) {
          let num = 1;
          this.on("canplaythrough", () => {
            // _this.$message.success("摄像头加载成功");
          });
          // 加载失败会在有限次数内，不断重试
          this.on("error", () => {
            if (num > 5) {
              _this.$message.error("摄像头加载失败，请重新尝试");
              num = 1;
            } else {
              _this.$message.info("摄像头第" + num + "次尝试加载....");
              num++;
              setTimeout(() => {
                this.src(item); // 放入接口返回的url
                this.play();
              }, 5000);
            }
          });
          this.src(item); // 放入接口返回的url
          this.play();
        }
      );
    });
  </script>
</html>
